<script setup lang="ts">
import { numberApi } from "@/api/controller";
import { ToastSuccess, Toastloading } from "@/utils/public";
import { nextTick, reactive, ref } from "vue";
const formLabelWidth = "120px";
const dataForm = ref();
const $emit = defineEmits(["updateList"]);
const action = reactive({
  dialogFormVisible: false,
  medalList:[] as any[],
  medalChildrenList:[] as any[]
});
const dateArr = ref();
const form = reactive({
  uuid: "",
  user_id: "",
  class_id: "",
});
const formRules = {};
const handleSubmit = () => {
  let [start_time,end_time] = dateArr.value
  start_time = start_time / 1000
  end_time = end_time / 1000
  dataForm.value.validate(async (valid: any) => {
    if(valid) {
      const loading = Toastloading();
      await numberApi.userVset({...form,start_time,end_time})
      loading.close()
      closeDialog();
      ToastSuccess('操作成功！')
      $emit("updateList");
    }
  });
};
const handleMedalChange = async()=>{
    const res = await numberApi.getChildrenMedal(form)
    action.medalChildrenList = res.data;
}
const getMedalList = async()=> {
    let res = await numberApi.getMedalList({})
    action.medalList = res.data
}
const openDialog = async(query: any = {}) => {
  const { user_id, uuid } = query
  Object.assign(form,{
    user_id,
    uuid,
    class_id:"",
  })
  const loading = Toastloading();
  await getMedalList()
  loading.close()
  action.dialogFormVisible = true;
};
const closeDialog = () => {
  Object.assign(form, {
    uuid: "",
    user_id: "",
    class_id: "",
  });
  nextTick(() => {
    dataForm.value.clearValidate();
  });
  action.dialogFormVisible = false;
};
defineExpose({
  openDialog,
});
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
      destroy-on-close
      title="用户加V"
    >
    <el-form
        ref="financeForm"
        :model="dataForm"
        :label-width="formLabelWidth"
      >
        <el-form-item label="用户UUID：" >
          <el-tag>{{ form.uuid }}</el-tag>
        </el-form-item>
        <el-form-item label="勋章分类">
          <el-cascader
            :options="action.medalList"
            :v-model="form.class_id"
            placeholder="可搜索分类"
            filterable
            @change="handleMedalChange"
          />
        </el-form-item>
        <el-form-item label="查看勋章">
          <el-cascader
            :options="action.medalChildrenList"
            :v-model="form.class_id"
            placeholder="可搜索勋章"
            filterable
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.xm-dialog {
  .el-input {
    width: calc($inputWidth);
  }
}
</style>
